<template>
    <div>
        <div class='addBrand'>
            <h3>添加Banner</h3>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                <el-form-item label="Banner名称:" prop="name">
                    <el-input class='input' style="width:30%" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="Banner排序:" prop="sort">
                    <el-input class='input' style="width:30%" v-model="ruleForm.sort"></el-input>
                </el-form-item>
                <el-form-item label="Banner跳转:" prop="action">
                    <el-select class="input" style="width:30%" v-model="ruleForm.action" placeholder="选择链接">
                        <el-option v-for="item in option" :key="item.id" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="ruleForm.action == 1" label="Banner链接:" prop="link">
                    <el-input class='input' style="width:30%" v-model="ruleForm.link"></el-input>
                </el-form-item>
                <el-form-item label="平台类型:" prop="status">
                    <el-radio v-model="ruleForm.platform" label="ALL">全部</el-radio>
                    <el-radio v-model="ruleForm.platform" label="JSAPI">小程序</el-radio>
                    <el-radio v-model="ruleForm.platform" label="APP">App</el-radio>
                </el-form-item>
                 <el-form-item label="banner类型:" prop="status">
                    <el-radio v-model="ruleForm.type" label="0">banner</el-radio>
                    <el-radio v-model="ruleForm.type" label="1">广告</el-radio>
                </el-form-item>
                <el-form-item label="Banner状态:" prop="status">
                    <el-switch v-model="status"> {{ruleForm.status = status == true ? 1 : 0}}</el-switch>
                    <!-- <el-checkbox v-model="status">{{status ? '有效': '无效'}}</el-checkbox> -->
                </el-form-item>

                <!-- 选择店铺 -->
                <!-- <el-form-item label="选择店铺:" prop="shopid" >
                    <div class="selGoods input"   style="margin-top:10px;width:30%">
                        <section>
                            <ul>
                                <li :key="item.id" v-for="item in addShopVal" style="display:inline-block; margin:5px;line-height:30px;">
                                    <span>{{item.storeName }}</span>
                                    <i title="删除" @click="deleteShop(item.storeId,$event)" class="el-icon-close"></i>
                                </li>
                            </ul>
                        </section>
                    </div>
                    <el-button type="primary" style="margin-left:20px"  @click="handleShopClick">选择店铺</el-button>
                </el-form-item> -->
                <!-- 店铺列表 -->
                <!-- <transition name="fade">
                    <div class="popup-detail" v-loading="tableLoading" v-if="isShow">
                        <div class="selGoods">
                            <h3>选择店铺</h3>
                            <section>
                                <ul>
                                    <li :key="item.id" v-for="item in addShopVal" style="display:inline-block;margin:5px;line-height:30px;">
                                        <span>{{item.storeName}}</span>
                                        <i title="删除" @click="deleteShop(item.storeId,$event)" class="el-icon-close"></i>
                                    </li>
                                </ul>
                            </section>
                        </div>
                        <div class="searchList">
                            <el-table
                                ref="multipleTable"
                                :data="searchShopList"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                                <el-table-column
                                    type="selection"
                                    width="55">
                                </el-table-column>
                                <el-table-column
                                    prop="storeName"
                                    label="店铺名称"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    prop="storeNo"
                                    label="店铺编号"
                                    width="180">
                                </el-table-column>
                            </el-table>
                            
                            <section class="pagination" > 
                                <template v-if="page == 1"> 
                                    <el-button type="primary" disabled>上一页</el-button>
                                </template>
                                <template v-else> 
                                    <el-button type="primary" @click="pagePrev">上一页</el-button>
                                </template>
                                <template v-if="Math.ceil(total/10) <= page"> 
                                    <el-button type="primary" disabled>下一页</el-button>
                                </template>
                                <template v-else> 
                                    <el-button type="primary" @click="pageNext">下一页</el-button>
                                </template>
                                <template>
                                    <el-button  disabled>共{{this.total}}条</el-button>
                                    
                                    <el-button  disabled>第{{this.page}}页</el-button>
                                </template>
                            </section>
                        </div>
                        <section class="bottomAdd" style="margin-top:20px;float:right"> 
                            <el-button style="margin-left:0px;margin-right:10px" type="primary"  @click="addShop">增加</el-button>
                            <el-button style="margin-left:0px;" :type="nowSelList && nowSelList.length > 0 ? 'primary' : 'info'" @click="selDone">选择完毕</el-button>
                        </section>
                        <i class="el-icon-circle-close-outline close" title="关闭" @click="close"></i>
                    </div>
                </transition> -->

                <el-form-item label="Banner图片:" class="" prop="url">
                    <div class="prevImg" v-if="imageUrl">
                        <img height="200" id="imageSize" :src="imageUrl" alt="">
                        <i class="el-icon-error" @click="deleteImgList()"></i>
                    </div>
                    <!-- {{item.goodsImg.length}} -->
                    <template v-if="imageUrl==''">
                        <div class="upload" v-loading="uploadLoading">
                            <input class="file" id='' name="file" type="file" accept="image/png,image/gif,image/jpeg" multiple @change="upload($event)" />
                            <i class="el-icon-plus"></i>
                        </div>
                    </template>
                    <template v-else>
                        <div class="upload" style="display:inline-block">
                            <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="upload($event)" />
                            <span>点击更换</span>
                        </div>
                    </template>
                </el-form-item>
                <el-form-item class='left-btn'>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button type="primary" @click="goBack('ruleForm')">返回</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>
<script>
import {
    addBanner,
    getQiniuToken,
    qiniuBaseUrl,
    getStoreList
} from "../../data/postData";
export default {
    data() {
        return {
            ruleForm: {
                name: "",
                sort: "",
                url: "",
                status: "",
                action: 0,
                link: "",
                platform: "ALL",
                type:'0'
            },
            option: [
                {
                    id: 0,
                    value: 0,
                    label: "无跳转"
                },
                {
                    id: 1,
                    value: 1,
                    label: "有跳转"
                }
            ],
            // searchShopList:null,
            // total:'',
            // page:'1',
            // size:'10',
            // isShow:false,
            // storeList:[],
            // addShopVal:[],
            // nowSelList:[],
            // tableLoading:false,
            status: true,
            imageUrl: "",
            uploadLoading: false,
            rules: {
                name: [
                    { required: true, message: "输入轮播名称", trigger: "blur" }
                ],
                sort: [
                    { required: true, message: "输入轮播排序", trigger: "blur" }
                ],
                action: [
                    { required: true, message: "选择是否跳转", trigger: "blur" }
                ],
                link: [
                    { required: true, message: "选择跳转链接", trigger: "blur" }
                ],
                url: [
                    { required: true, message: "上传轮播图片", trigger: "blur" }
                ],
                status: [
                    { required: true, message: "选择轮播状态", trigger: "blur" }
                ]
                //   shopid: [
                //     { required: true, message: '请选择店铺', trigger: 'blur' },
                //   ],
            }
        };
    },
    mounted() {},
    methods: {
        //选择活动店铺相关
        // deleteShop(id,e){
        //     this.addShopVal.forEach((val,i)=>{
        //         if (val.storeId == id) {
        //             this.addShopVal.splice(i,1)
        //         }
        //     })
        // },
        // addShop(){
        //     let need = []
        //     let that = this
        //     let arr1 = []
        //     let now = []
        //    // console.log('selval',this.selVal)

        //     if(this.nowSelList.length > 0){

        //         if (this.addShopVal.length > 0 ) {
        //             now = this.addShopVal.concat(this.nowSelList)
        //             var unique = {};
        //             now.forEach(function(gpa){ unique[ JSON.stringify(gpa) ] = gpa });
        //             now = Object.keys(unique).map(function(u){return JSON.parse(u) });

        //             console.log('now',now)
        //             this.addShopVal = now

        //         }else{
        //             this.addShopVal = this.addShopVal.concat(this.nowSelList)
        //         }
        //     }
        //     console.log('addShopVal',this.addShopVal)
        //     this.$refs.multipleTable.clearSelection();
        //     this.nowSelList = '';
        // },
        // handleShopClick(){
        //     this.isShow=true
        //     var params = {
        //         "data":{
        //             "page":this.page,
        //             "size":'10'
        //         }
        //     }
        //     this.$fetch.post(getStoreList,params).then(res=>{
        //         console.log(res.data)
        //         this.searchShopList = res.data
        //         this.total = res.total
        //     }).catch(err=>{})
        // },
        // handleSelectionChange(val){
        //     this.nowSelList = val
        // },
        // selDone(){
        //     this.addShop()
        //     this.close()
        // },
        // close(){
        //     this.isShow =false
        // },
        // pagePrev(){
        //     this.page--
        //     this.handleShopClick(this.page)
        // },
        // pageNext(page){
        //     this.page++
        //     this.handleShopClick(this.page)
        // },

        upload(e) {
            const that = this;
            var files = e.target.files[0];
            // let width,height;
            // let reader = new FileReader();
            // reader.onload = function(e){
            //     var image = new Image();
            //     image.onload = function(){
            //         width = image.width
            //         height = image.height
            //         if(width == 400) {
            if(files.size / 1000 > 500 && this.ruleForm.type === '1') {
                this.$message.error('图片大于500KB') ;
                return
            }
            that.uploadLoading = true;
            that.$http
                .get(getQiniuToken, {
                    params: {
                        wxUid: "",
                        wxSid: ""
                    }
                })
                .then(res1 => {
                    let config = {
                        headers: { "Content-Type": "multipart/form-data" }
                    };
                    let formdata = new FormData(); //创建form对象
                    formdata.append("file", files, files.name);
                    formdata.append("chunk", "0"); //断点传输
                    formdata.append("chunks", "1");
                    formdata.append("token", res1.data.uptoken);
                    that.$http
                        .post("http://up-z1.qiniup.com", formdata, config)
                        .then(res2 => {
                            if (res2.data.key != "") {
                                that.imageUrl =  (that.ruleForm.type !== '1' ? qiniuBaseUrl + res2.data.key + '?imageMogr2/thumbnail/400000@' :qiniuBaseUrl + res2.data.key );
                                that.$message.success("图片上传成功");
                                that.uploadLoading = false;
                            }
                        });
                });

            //         }else{
            //             alert('超过')
            //         }
            //     }
            //     image.src = e.target.result
            // }
            //     reader.readAsDataURL(files);
            //     console.log('widthwidth',width)
        },
        deleteImgList() {
            this.imageUrl = "";
        },
        goBack() {
            this.$router.go(-1);
        },
        submitForm() {
            if (this.status == true) {
                this.ruleForm.status = 1;
            } else {
                this.ruleForm.status = 0;
            }
            if (this.ruleForm.action == 0) {
                this.ruleForm.link = "";
            }
            // if(this.addShopVal && this.addShopVal.length>0){
            //     let shopArr=[];
            //     this.addShopVal.forEach(item=>{
            //         shopArr.push(item.storeNo)
            //     })
            //     this.storeList = shopArr
            //     console.log(this.storeList.toString(),'this.storeList')
            // }
            let {name,sort,status,action,link,platform,type} = this.ruleForm
            var params = {
                data: {
                    name,
                    sort: "" + sort,
                    url: this.imageUrl,
                    status: "" + status,
                    action: "" + action,
                    link,
                    platform,
                    type: +type
                    //"storeNos":this.storeList.toString()
                }
            };
            if (name == "") {
                this.$message.warning("轮播名称不能为空");
            } else if (sort == "") {
                this.$message.warning("轮播排序不能为空");
            } else if (/^[1-9][0-9]?$/.test(+sort) == false) {
                this.$message.warning("轮播排序只能为1-99整数");
            } else if (action == 1 && link == "") {
                this.$message.warning("请选择跳转链接");
            } else if (this.imageUrl == "") {
                this.$message.warning("请上传轮播图片");
            } else {
                this.$confirm("确认保存？").then(_ => {
                    this.$fetch
                        .post(addBanner, params)
                        .then(res => {
                            this.$message.success(res.message);
                            setTimeout(() => {
                                this.$router.go(-1);
                            }, 1500);
                        })
                        .catch(err => {
                            this.$message.error(err.message);
                        });
                });
            }
        }
    }
};
</script>
<style scoped lang="less">
.addBrand {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 0px;
    }
    .input {
        width: 50%;
    }
}
.avatar-uploader {
    height: 200px;
    width: 200px;
    border: 1px dashed #333;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.el-upload {
    width: 200px;
    height: 200px;
    text-align: center;
    border: 1px solid green;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.right-btn {
    position: absolute;
    right: 10%;
    margin-bottom: 22px;
}
.upload {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px dotted #ccc;
    position: relative;
    input {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 999;
        cursor: pointer;
    }
    i {
        font-size: 80px;
        color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
}
.prevImg {
    position: relative;
    display: inline-block;
    & + .prevImg {
        margin-left: 10px;
    }
    img {
        margin-top: 15px;
    }
    i {
        cursor: pointer;
    }
    i.el-icon-error {
        position: absolute;
        right: -8px;
        top: 4px;
        font-size: 20px;
        color: #ec5051;
        cursor: pointer;
    }
    i.el-icon-back {
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 20px;
        color: #409eff;
    }
}
.upload {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px dotted #ccc;
    position: relative;
    input {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 999;
        cursor: pointer;
    }
    i {
        font-size: 80px;
        color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    span {
        color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
        width: 100%;
        text-align: center;
    }
}
//     .selGoods{
//         margin-bottom: 20px;
//         border-bottom: 1px solid #eee;
//         padding-bottom: 20px;
//         section{
//             padding: 20px 0;
//             border: 1px solid #ccc;
//             border-radius: 10px;

//         }
//     }
//     .input{
//         width:300px;
//     }
//     .pagination{
//     display: flex;
//     justify-content: center;
//     margin: 20px 0;

// }
</style>
